<template>
  <el-scrollbar class="scrollbar" wrap-class="scrollbar-wrap-class">
    <el-menu
      :default-active="$route.fullPath"
      mode="vertical"
      :collapse="getLayoutState.isCollapse"
      :background-color="getBackgroundColor"
      :text-color="getTextColor"
      :collapse-transition="false"
    >
      <slot></slot>
    </el-menu>
  </el-scrollbar>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import { LayoutStoreModule } from "@/store/modules/LayoutStore";

@Component({
  name: "LyScrollerMenu",
  components: {},
})
export default class LyScrollerMenu extends Vue {
  //#region vue prop =================================

  @Prop({
    type: Array,
    default: () => {
      return [];
    },
  })
  routes: any[];
  @Prop({
    type: String,
    default: "",
  })
  fullPath: string;
  //#endregion

  //#region vue data =================================

  //#endregion
  //#region computed getter =================================
  get getLayoutTheme() {
    console.log("themem:", LayoutStoreModule.theme);
    return LayoutStoreModule.theme;
  }
  get getLayoutState() {
    return LayoutStoreModule;
  }
  get getLayoutThemeVariables() {
    console.log(
      "themeVariables",
      JSON.stringify(LayoutStoreModule.themeVariables)
    );
    return LayoutStoreModule.themeVariables;
  }

  get getBackgroundColor() {
    return LayoutStoreModule.themeVariables[LayoutStoreModule.theme].menuColor;
  }
  get getTextColor() {
    return LayoutStoreModule.themeVariables[LayoutStoreModule.theme]
      .menuTextColor;
  }
  //#endregion
  //#region vue life =================================
  created() {
    console.log("LyScrollerMenu " + "created");
  }

  mounted() {
    console.log("LyScrollerMenu " + "mounted");
  }

  beforeDestroy() {
    console.log("LyScrollerMenu " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================

  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss" scoped>
@import "src/assets/styles/variables.scss";
.scrollbar {
  height: calc(100% - #{$logoHeight}) !important;
}
.scrollbar-wrap-class {
  overflow: hidden !important;
}
</style>
